<template>
    <!-- 轮播图 -->
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in carouselChartData" :key="item">
    <img :src="item.pic_url" alt="">
  </van-swipe-item>
  
</van-swipe>
<!-- 商品分区 -->
    <!-- 热销商品 -->
    <Goods :goodsList="hotGoods" title="热销商品"></Goods>
    <!-- 最新上架 -->
    <Goods :goodsList="newGoods" title="最新商品"></Goods>

</template>
<script setup>
import {ref,onMounted} from 'vue'
import {getCarouselChartData,getGoodsList} from '@/api/home.js'
//轮播图数据
const carouselChartData =ref([])
//热销商品
const hotGoods =ref([])
//最新商品
const newGoods = ref([])
onMounted(async ()=>{
    carouselChartData.value = (await getCarouselChartData({limit:'10',page:'1'})).data.list
    hotGoods.value = (await getGoodsList({limit:'10',page:'1',sort:'sale'})).data.list
    newGoods.value =(await getGoodsList({limit:'10',page:'1',sort:'recent'})).data.list
})
</script>
<style lang="scss">
.my-swipe .van-swipe-item {

  img {
    width: 100%;
  }
}
</style>